iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0
佛心分享-IT 人自學之術

CSS破冰突圍:自學挑戰前端設計系列 第 3

Day3 : 還沒開始輸入嗎?讓placeholder成為指路的嚮導

  • 分享至 

  • xImage
  •  

填空大師placeholder的提示文字,讓表單更智能、更友善~

為什麼要有這功能
Placeholder 的提示文字在表單設計中扮演著重要角色,讓使用者能夠快速理解每個輸入欄位的目的,從而提升使用體驗。

核心結構
placeholder 屬性是 HTML 表單元素(如 input 和 textarea)的一部分,用於在輸入框中顯示提示文字。
當使用者開始輸入時,提示文字會自動消失。可以幫助使用者了解應該在輸入框中輸入什麼樣的內容。

主要功能
1.提示使用者: placeholder 屬性主要用於提示使用者應該在輸入框中輸入什麼樣的格式內容。
如,在一個要求輸入電子郵件地址的輸入框中,可以使用 placeholder="請輸入電子郵件地址" 來提示使用者。

2.提高可用性: 通過在輸入框中顯示提示文字,可以提高表單的可用性,讓使用者更容易理解應該輸入什麼樣內容,從而減少輸入錯誤。

3.美觀和一致: 使用 placeholder 屬性可以使表單看起來更加美觀和一致,也可以節省空間,避免在表單中添加額外的標籤或說明文字。

4.多語系支持:可以根據使用者的語言環境顯示不同的提示文字,從而提高表單的多語系支持。

注意事項
1.提示文字應簡潔:提示文字旨在幫助使用者理解要輸入的內容。太長的提示文字可能會讓使用者感到困惑,影響可讀性。

2.避免與實際輸入內容混淆:提示文字應避免使用與實際輸入內容雷同的文字,易造成使用者混淆。

3.瀏覽器兼容性: 雖然大多瀏覽器都支持 placeholder 屬性,但在HTML5之前的舊版瀏覽器中可能不支援。

範例參考:
https://ithelp.ithome.com.tw/upload/images/20240917/20169510P5J0i3GReh.png


上一篇
Day2 : 活動ON/OFF魔術師:自由切換顯示內容
下一篇
Day4 : 空間設計師:Row和Col輕鬆搞定佈局
系列文
CSS破冰突圍:自學挑戰前端設計12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言